<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js实现文字滚动</title>
	</head>
	<style type="text/css">
		ul{list-style:none;padding:0px;margin:0px;}
		.clearfix{
			display:block;
			content:'';
			clear:both;
		}
		#box{
			width:1002px;
			border:1px solid #ccc;
			margin:200px auto;
			height:200px;
			overflow:hidden;
			background:green;
		}
		#one{
			border:1px solid #ccc;
		}
		#two{
			float:left;
		}
		li{
			 width:180px;
			 height:180px;
			 padding:10px;
			 text-align:center;
			 float:left;
			 display:inline-block;
		}
		li img{
			width:100%;
			height:100%;
		}
	</style>
	<body> 
		<div id="box" >
			<ul id="one" class="clearfix">
				<li id="lis"><img src="images/demo0.jpg"></li>
				<li><img src="images/demo1.jpg"></li>
				<li><img src="images/demo2.jpg"></li>
				<li><img src="images/demo0.jpg"></li>
				<li><img src="images/demo1.jpg"></li>
				<li><img src="images/demo2.jpg"></li>
				<li><img src="images/demo0.jpg"></li>
				<li><img src="images/demo1.jpg"></li>
				<li><img src="images/demo1.jpg"></li>
				<li><img src="images/demo0.jpg"></li>
				<ul id="two">
				</ul>
			</ul>
			
			</div>
 		</div>
 		<script>
 			var box = document.getElementById('box');
 			var one = document.getElementById('one');
 			var two = document.getElementById('two');
 			var box1 = document.getElementById('box1');
 			var lis = one.getElementsByTagName('li');
 			var ulWidth = lis[0].offsetWidth*lis.length;
 			var moveTime = 10;
 			two.innerHTML=one.innerHTML;
 			one.style.width=2*ulWidth+'px';	
 			function moveImg(){
 				if(ulWidth-box.scrollLeft<=0){
 					box.scrollLeft=0;
 				}else{
 					box.scrollLeft++;
 					document.title=box.scrollLeft;
 				}
 			}
 			var timer = setInterval(moveImg,moveTime);
 			box.onmouseover=function(){
 				clearInterval(timer);
 			}
 			box.onmouseout=function(){
 				timer = setInterval(moveImg,moveTime);
 			}
 		</script>
	</body>
</html>